import {Component, Directive, Input}         from 'angular2/core';
import {forwardRef}         from 'angular2/core';
import {ElementRef} from 'angular2/core';
import {HighlightDirective} from './highlight.directive';
import {UnlessDirective} from './unless.directive';

@Component({
	selector: 'my-app',
	template: `
    <h1>My First Attribute Directive</h1>
    <h4>Pick a highlight color</h4>
    <div>
    <input type="radio" name="colors" (click)="color='lightgreen'">Green
    <input type="radio" name="colors" (click)="color='yellow'">Yellow
    <input type="radio" name="colors" (click)="color='cyan'">Cyan
    </div>
    <p myHighlight [highlightColor]="color">Highlight me!</p>
    <p *ngIf="condition">
      condition is true and ngIf is true.
    </p>
    <p *myUnless="condition">
      condition is false and myUnless is true.
    </p>
  `,
	directives: [forwardRef(() => HighlightDirective), UnlessDirective]
})
export class AppComponent {
    condition = true;
}

// @Directive({
//     selector: '[myHighlight]',
//     host: {
// 		'(mouseenter)': 'onMouseEnter()',
// 		'(mouseleave)': 'onMouseLeave()'
//     }
// })
// export class HighlightDirective {
// 	@Input() highlightColor: string;
// 	private _defaultColor = 'red';

// 	constructor(private el: ElementRef, public appCmp: AppComponent) {
// 		console.log('----------');
// 	 }

// 	onMouseEnter() {
// 		this._highlight(this.highlightColor || this._defaultColor);
// 	}

// 	onMouseLeave() {
// 		this._highlight(null);
// 	}

// 	private _highlight(color: string) {
// 		this.el.nativeElement.style.backgroundColor = color;
// 	}
// }
